/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
// 封装函数，形成复用
async function channelList() {
  // 1.1 获取频道列表数据
  const result = await axios({
    url: '/v1_0/channels'
  })
  // console.log(result)
  // console.log(result.data.channels);

  // 1.2 展示到下拉菜单中
  const channelData = result.data.channels
  const channelStr = channelData.map(item => {
    return `<option value=${item.id}>${item.name}</option>`
  }).join('')
  document.querySelector('.form-select').innerHTML = `<option value="" selected="">请选择文章频道</option>` + channelStr
}
// 网页运行后，默认调用一次
channelList()


/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
// 2.1 准备标签结构和样式
document.querySelector('.img-file').addEventListener('change', async (e) => {

  // 2.2 选择文件并保存在 FormData
  const file = e.target.files[0]
  const fd = new FormData()
  fd.append('image', file)
  // console.log(fd)
  // 2.3 单独上传图片并得到图片 URL 网址
  const result = await axios({
    url: '/v1_0/upload',
    method: 'post',
    data: fd
  })
  // console.log(result)
  console.log(result.data.url)

  // 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
  const imgSrc = result.data.url
  document.querySelector('.rounded').src = imgSrc
  // localStorage.setItem('Img', imgSrc)
  document.querySelector('.rounded').classList.add('show')
  document.querySelector('.place').classList.add('hide')
})
// const imgUrl = localStorage.getItem('Img')
// imgUrl && (document.querySelector('.rounded').src = imgUrl)

//优化：点击img标签，可以进入选择图片
document.querySelector('.rounded').addEventListener('click', () => {
  document.querySelector('.img-file').click()
})


/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async (e) => {
  // 5.1 判断按钮文字，区分业务（因为共用一套表单）
  if (e.target.innerHTML !== '发布') {
    return
  }
  //----- 3.1 基于 form-serialize 插件收集表单数据对象-----
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hash: true, empty: true })
  // 发布文章时，不需要id（为了后来编辑文章时使用）属性，所以可以删除掉
  delete data.id
  console.log(data);
  // 将自己收集的图片地址保存到data对象中(以接口文档中的格式，参数等为准)
  data.cover = {
    type: 1,//封面类型
    images: [document.querySelector('.rounded').src],//封面图片的URL网址
  }
  console.log(data);

  try {
    // 3.2 基于 axios 提交到服务器保存
    const result = await axios({
      url: '/v1_0/mp/articles',
      method: 'post',
      data: data
    })
    // console.log(result)
    // 3.3 调用 Alert 警告框反馈结果给用户
    myAlert(true, '发布文章成功!')

    // -----3.4 重置表单并跳转到列表页-----
    form.reset()
    //封面需要手动重置
    document.querySelector('.rounded').src = ''
    document.querySelector('.rounded').classList.remove('show')
    document.querySelector('.place').classList.remove('hide')
    //富文本内容重置
    editor.setHtml('')
    //跳转页面
    setTimeout(() => {
      location.href = '../content/index.html'
    }, 2000)
  } catch (error) {
    // console.log(error.response.data.message)
    // 3.3 调用 Alert 警告框反馈结果给用户
    myAlert(false, error.response.data.message)
  }
})



  /**
   * 目标4：编辑-回显文章
   *  4.1 页面跳转传参（URL 查询参数方式）
   *  4.2 发布文章页面接收参数判断（共用同一套表单）
   *  4.3 修改标题和按钮文字
   *  4.4 获取文章详情数据并回显表单
   */
  // 4.2 发布文章页面接收参数判断（共用同一套表单）
  ; (function () {
    //将先前的跳转的网址中的文章id以字符串形式得到
    console.log(location.search);//id=fdf41382-2440-4cfc-9d5e-8d0972a19ad3

    //将字符串拆分成查询参数所需要的值和格式，方便查询数据
    const paramsStr = location.search
    const params = new URLSearchParams(paramsStr)
    params.forEach(async (value, key) => {
      console.log(value, key);
      // 4.2 发布文章页面接收参数判断（共用同一套表单）
      //如果有编辑文章的跳转则根据指定id进行编辑文章
      if (key === 'id') {
        // 4.3 修改标题和按钮文字
        document.querySelector('.title span').innerHTML = '修改文章'
        document.querySelector('.send').innerHTML = '修改'

        // 4.4 获取文章详情数据并回显表单
        const result = await axios({
          url: `/v1_0/mp/articles/${value}`
        })
        //创建所需要的对象数据，方便后续遍历回显
        delete (result.data.pub_date)
        console.log(result);
        const articleObj = {
          channel_id: result.data.channel_id,
          content: result.data.content,
          cover: result.data.cover.images[0],//封面地址
          title: result.data.title,
          id: result.data.id,
        }
        console.log(articleObj)

        //遍历数据对象属性形成数组，映射到页面元素上，快速赋值
        Object.keys(articleObj).forEach(item => {
          if (item === 'cover') {
            //封面设置
            if (articleObj[item]) {
              //有封面
              document.querySelector('.rounded').src = articleObj[item]
              document.querySelector('.rounded').classList.add('show')
              document.querySelector('.place').classList.add('hide')
            }
          } else if (item === 'content') {
            //富文本内容
            editor.setHtml(articleObj[item])
          } else {
            //用数据对象属性名，作为标签name属性选择器值来找到相匹配的标签
            document.querySelector(`[name=${item}]`).value = articleObj[item]
          }
        })
      }
    })
  })();




/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async e => {
  // 5.1 判断按钮文字，区分业务（因为共用一套表单）
  if (e.target.innerHTML !== '修改') {
    return
  }
  try {
    // 5.2 调用编辑文章接口，保存信息到服务器(只是编辑指定id的文章)
    const form = document.querySelector('.art-form')
    const data = serialize(form, { hash: true, empty: true })
    console.log(data)
    const result = await axios({
      url: `/v1_0/mp/articles/${data.id}`,
      method: 'put',
      data: {
        ...data,
        cover: {
          type: document.querySelector('.rounded') ? 1 : 0,
          images: [document.querySelector('.rounded').src]
        }
      }
    })
    console.log(result)
    // 5.3 基于 Alert 反馈结果消息给用户
    myAlert(true, '修改文章成功！')
  } catch (error) {
    console.dir(error)
    // 5.3 基于 Alert 反馈结果消息给用户
    myAlert(false, error.response.data.message)
  }
})